<template>
  <a :href="detailUrl">
    <!--  图片列表详情页，点击的时候，统计图书浏览次数 -->
  <div class="book-card">
    <!-- 书籍图片信息，阻止事件传播给a标签 -->
    <!-- 点击时，使用图片预览功能  -->
    <div class="thumb" @click.stop="preview">
      <!-- 这里用了小程序重新封装的图片组件
        其实本质都是一样的，都是对象
        https://developers.weixin.qq.com/miniprogram/dev/component/image.html
        这里是根据宽，对图片进行缩放
        -->
      <img :src="book.image"
            class="img"
            mode="aspectFit"
            />
    </div>
    <!-- 书籍详情信息，三行布局 -->
    <div class="detail">
      <!--  第一行 这个行这里我觉得可以采用flex布局，更加稳定-->
      <div class="row text-primary">
        <!-- 评论分数组件 -->
        <!-- 为什么右边的在前面，因为相对定位是老家留坑，影子飘出去 -->
        <div class="right">
          {{book.rate}} <Rate :value='book.rate'></Rate>
        </div>
        <div class="left">
          {{book.title}}
        </div>
      </div>
      <!-- 作者跟浏览量  -->
      <div class="row">
        <div class="right text-primary">
          浏览量:{{book.count}}
        </div>
        <div class="left">
          {{book.author}}
        </div>
      </div>
      <!--  出版社跟推荐者 -->
      <div class="row">
        <div class="right">
           {{book.user_info.nickName}}
        </div>
        <div class="left">
         {{book.publisher}}
        </div>
      </div>


    </div>
  </div>
  </a>

</template>
<script>
  /* 评分组件 */
import Rate from '@/components/Rate'
export default {
    components: {
      Rate
    },
    props: ['book'],
    computed: {
      detailUrl () {
        return '/pages/detail/main?id=' + this.book.id
      // return "";
      }
    },
    methods: {
    //  图片预览。。
      preview () {
        wx.previewImage({
          current: this.book.image,
          urls: [this.book.image]
        })
      }
    }
}
</script>
<style lang='scss' scoped>
.book-card{
  padding:5px;
  overflow: hidden;
  margin-top:5px;
  margin-bottom:5px;
  font-size:14px;
  /* 书籍图片 */
  .thumb{
    width:90px;
    height:90px;
    /*  居中写法  */
    float: left;
    margin:0 auto;
    overflow:hidden;
    .img{
      max-width: 100%;
      max-height: 100%;
    }
  }
  /*  详情页 */
  .detail{
    margin-left: 100px;
    .row{
      line-height:20px;
      margin-bottom:3px;
    }
    /* 非书籍信息 */
    .right{
      float: right;
    }
    /* 其他信息 */
    .left{
      margin-right:80px;
    }
  }

}
</style>










